<template>
    <a-drawer popup-container="#wrap" width="100%" :footer="false" :visible="show" :ok-loading="form.loading"
        @cancel="show = false">
        <template #title>
            {{ $t('components.area.60zehiy3mpw0') }}
        </template>
        <div class="area">
            <div id="area"></div>
        </div>
    </a-drawer>
</template>

<script lang='ts' setup>
import { defineModel } from 'vue'
import { LineLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const show = defineModel('show', { default: false })
// const list: any = defineModel('list', { default: [] })
const detail = defineModel('data', {
    default: {
        points: [],
        point: '',
        color: ''
    } as any
})
const local = useLocal()
const emit = defineEmits(['refresh'])
const form = reactive({
    loading: false,
    uid: local.usermsg.id == 3 ? 0 : local.usermsg.id
})
const scene = ref();
const mounted = ref(false);
let layer1: any;
let layer2: any;
const createLayer = () => {
    // const data = {
    //     features: list.value.map((item: any) => {
    //         return {
    //             type: "Feature",
    //             properties: {
    //                 color: item.color,
    //             },
    //             geometry: {
    //                 type: "Polygon",
    //                 coordinates: [item.points?.map((subItem: any) => {
    //                     return [Number(subItem.lng?.toFixed(6)), Number(subItem.lat?.toFixed(6))]
    //                 })]
    //             }
    //         }
    //     }),
    //     type: "FeatureCollection"
    // }
    // console.log(data)
    // layer1.value = new PolygonLayer({})
    //     .source(data)
    //     .color('color', (color) => {
    //         return color + '30' //加透明度
    //     })
    //     .shape('fill')
    //     .active(true);
    // layer2.value = new LineLayer({
    //     zIndex: 2,
    // })
    //     .source(data)
    //     .color('color')
    //     .active(true)
    //     .size(1)
    //     .style({
    //         lineType: 'solid'
    //     });
    // scene.value.addLayer(layer1.value);
    // scene.value.addLayer(layer2.value);
    // console.log(list.value)
    // const data = {
    //     features: list.value.filter((item: any) => item.status === 0 || item.status === 3)?.map((item: any) => {
    //         return {
    //             type: "Feature",
    //             properties: {
    //                 color: item.color,
    //                 height: item.limitHeight || 5
    //             },
    //             geometry: {
    //                 type: "Polygon",
    //                 coordinates: [item.points?.map((subItem: any) => {
    //                     return [Number(subItem.lng?.toFixed(6)), Number(subItem.lat?.toFixed(6))]
    //                 })]
    //             }
    //         }
    //     }),
    //     type: "FeatureCollection"
    // }
    const data = {
        features: [{
            type: "Feature",
            properties: {
                color: detail.value.color,
                height: detail.value.limitHeight || 5
            },
            geometry: {
                type: "Polygon",
                coordinates: [detail.value.points?.map((subItem: any) => {
                    return [Number(subItem.lng?.toFixed(6)), Number(subItem.lat?.toFixed(6))]
                })]
            }
        }],
        type: "FeatureCollection"
    }
    layer1 = new LineLayer({})
        .source(data)
        .size('height')
        .shape('wall')
        .color('color', (color) => {
            return color + '80'
        })
        .style({
            opacity: 1,
        });
    layer2 = new LineLayer({})
        .source(data)
        .size(1)
        .color('color', (color) => {
            return color + '80'
        })
        .style({
            opacity: 1,
        });
    scene.value.addLayer(layer1);
    scene.value.addLayer(layer2);
}
const toCenter = () => {
    let [lng, lat] = detail.value?.point?.split(',')
    scene.value.panTo([Number(lng), Number(lat)]);
    // scene.value.setCenter([lng, lat]);
}
(window as any)._AMapSecurityConfig = {
    securityJsCode: 'd84d8285ac6711fc36f6b313ab21372c'
}
const init = () => {
    let [lng, lat] = detail.value?.point?.split(',')
    scene.value = new Scene({
        id: 'area',
        map: new GaodeMap({
            center: [Number(lng), Number(lat)],
            zoom: 10,
            rotation: 1.22,
            pitch: 30,
            style: local.theme == 'light' ? 'normal' : local.theme,
            token: 'bd7d25df22d89905e5257e575709c2cc'
        }),
        logoVisible: false
    });
    scene.value.on('loaded', () => {
        createLayer()
    });
}
useWatch(show, (val: boolean) => {
    if (!detail.value?.point) return;
    if (val) {
        if (!mounted.value) {
            mounted.value = true
            init()
        } else {
            createLayer()
            toCenter()
        }
    } else {
        scene.value?.removeLayer(layer1)
        scene.value?.removeLayer(layer2)
    }
})
onBeforeUnmount(() => {
    scene.value?.destroy()
})
</script>

<style lang="less" scoped>
.area {
    width: 100%;
    height: 100%;

    #area {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 5px;
        overflow: hidden;
    }
}
</style>